Skip to content

Update dependency vuetify to v4#349

Merged
annehaley merged 2 commits into
masterfrom
renovate/vuetify-4.x
May 13, 2026
Merged

Update dependency vuetify to v4#349
annehaley merged 2 commits into
masterfrom
renovate/vuetify-4.x

Conversation

@renovate
Copy link
Copy Markdown
Contributor

@renovate renovate Bot commented Mar 12, 2026 •
edited
Loading

This PR contains the following updates:

Package Change Age Confidence
vuetify (source) 3.12.6 → 4.0.7 age confidence

Release Notes

vuetifyjs/vuetify (vuetify)

v4.0.7

Compare Source

[!CAUTION]
Vuetify Needs Your Support! The OpenCollective funds dried up. We are currently unable to compensate our contributors for their continued work on the framework and the ecosystem tools.

If Vuetify is part of your stack, please consider sponsoring the project so we can continue delivering updates and fixes.

Sponsor via Open Collective | Sponsor via GitHub

What happens when you open source project depends on unpaid labor:

  • releases appear less frequently
  • hard bugs get sidelined because nobody can afford the time to fix them
  • maintainers burn out from juggling day jobs with the framework you depend on
  • roadmap targets are moved

Every contribution helps us keep Vuetify alive and ship exciting new features.

Thank you.

🔧 Bug Fixes

v4.0.6

Compare Source

[!IMPORTANT]
Vuetify Needs Your Support! The OpenCollective funds have been fully exhausted. We are currently unable to compensate our contributors for their continued work on the framework and the ecosystem tools.

If Vuetify is part of your stack, please consider sponsoring the project so we can continue delivering updates and fixes.

Sponsor via Open Collective | Sponsor via GitHub

Every contribution helps us keep Vuetify alive and ship exciting new features.

Thank you.

🔧 Bug Fixes
🧪 Labs
  • VVideo: avoid tooltip obstructing volume slider (add2a7e)
  • VVideo: support VVideoControls as standalone component (aaf9cf5), closes #​22529
  • VVideo: show progress bar by default (1be0091)

v4.0.5

Compare Source

[!IMPORTANT]
Vuetify Needs Your Support! The OpenCollective funds have been fully exhausted. We are currently unable to compensate our contributors for their continued work on the framework and the ecosystem tools.

If Vuetify is part of your stack, please consider sponsoring the project so we can continue delivering updates and fixes.

Sponsor via Open Collective | Sponsor via GitHub

Every contribution helps us keep Vuetify alive and ship exciting new features.

Thank you.

🔧 Bug Fixes
🧪 Labs
  • VPie: shrink back hovered slices on mouseleave (1893748)

v4.0.4

Compare Source

[!IMPORTANT]
Vuetify Needs Your Support! The OpenCollective funds have been fully exhausted. We are currently unable to compensate our contributors for their continued work on the framework and the ecosystem tools.

If Vuetify is part of your stack, please consider sponsoring the project so we can continue delivering updates and fixes.

Sponsor via Open Collective | Sponsor via GitHub

Every contribution helps us keep Vuetify alive and ship exciting new features.

Thank you.

🔧 Bug Fixes
🧪 Labs

v4.0.3

Compare Source

🔧 Bug Fixes
  • hotkey: resilient sequence parsing (#​22704) (cae1cea), closes #​22399
  • md2: restore correct global rounding (6d1ef04), closes #​22707
  • VDataTable: reactive items from expanded with return-object (5d7af2c), closes #​22189
  • VExpansionPanels: apply rounded only to the first and last panel when closed (dbc7421), closes #​22722
  • VGrid: restore no-gutters instead of mapping to "compact" (947d7d5)
  • VSkeletonLoader: less jitter when scrolling on slow device (468ba31)
  • VTooltip: correct selector for non-interactive tooltips (15b3cbd), closes #​22724 #​22726
🧪 Labs

v4.0.2

Compare Source

[!IMPORTANT]
Vuetify Needs Your Support! The OpenCollective funds have been fully exhausted. We are currently unable to compensate our contributors for their continued work on the framework and the ecosystem tools.

If Vuetify is part of your stack, please consider sponsoring the project so we can continue delivering updates and fixes.

Sponsor via Open Collective | Sponsor via GitHub

Every contribution helps us keep Vuetify alive and ship exciting new features.

Thank you.

🚀 Features
🔧 Bug Fixes
🧪 Labs
  • VAvatarGroup: ❗ change the limit behavior to cover overflow item (e580ebc), closes #​22702 #​22703
  • VCommandPalette: add closeOnSelect prop and before-select event (#​22634) (d534f79)
  • VCommandPalette: correct name of the inner component (bfed30c)

v4.0.1

Compare Source

🚀 Features
🔧 Bug Fixes
🧪 Labs
  • VFileUpload: hide-browse should hide divider as well (84f70ef)
  • VFileUpload: expose controlRef for internal <input /> (36d3d3c)
  • VFileUpload: append instead of replacing files when multiple (c93d2b7)
  • VFileUpload: integrate VInput & split internal logic (#​22637) (027ab86)

v4.0.0

Compare Source

v4.0.0 (Revisionist)

Welcome to the v4.0.0 release of Vuetify!

Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by sponsors and backers. If your business depend on Vuetify, please consider joining sponsors and backers on various platforms to help support ongoing development and new features.

❗️ Important Links

💯 Release notes

🚀 Features
🔧 Bug Fixes
  • colors: correct CSS layer name (47d4b70)
  • defaults: skip undefined values (2a74859), closes #​17845
  • inputs: restore plain/underlined icon alignment (5495cca)
  • styles: utilities should override responsive typography (#​22573) (878907f)
  • VSnackbarQueue: pause all items when collapsed and hovered (df63fec)
  • theme: re-merge default variables when themes is set (a14c763)
  • theme: helpers should override theme base (2690877)
  • theme: override automatic text color with classes (#​22475) (59b11d5)
  • theme: .text- classes always override color from .bg- (7edf33a), closes #​21787
  • VContainer: drop dependency on utility class (47ca5c8)
  • VCounter: inherit color (aligns with VMessages) (#​22424) (ecd07b9)
  • VField: append/prepend should fill height (add5d2d)
  • VOverlay: apply scrollbar offset to body and VNavigationDrawer (ec926d7)
🔬 Code Refactoring
  • styles: replace !important with layers (7484c81)
  • VBtn: remove default text transform (#​21079) (712bdd6)
  • VBtn: convert display from grid to flex (41b7768)

Configuration

📅 Schedule: (UTC)

  • Branch creation
    • Between 12:00 AM and 03:59 AM, only on Monday (* 0-3 * * 1)
  • Automerge
    • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Mar 12, 2026 •
edited
Loading

Deploying geodatalytics with  Cloudflare Pages  Cloudflare Pages

Latest commit: a052be2
Status: ✅  Deploy successful!
Preview URL: https://19896de8.geodatalytics.pages.dev
Branch Preview URL: https://renovate-vuetify-4-x.geodatalytics.pages.dev

View logs

@renovate renovate Bot force-pushed the renovate/vuetify-4.x branch 3 times, most recently from 4cd6577 to 1957426 Compare March 18, 2026 22:10
@brianhelba
Copy link
Copy Markdown
Collaborator

brianhelba commented Mar 18, 2026

@annehaley I've pushed some code changes to support syntax changes for this update. Can you look at https://renovate-vuetify-4-x.geodatalytics.pages.dev/ and verify that things look correct?

@brianhelba brianhelba force-pushed the renovate/vuetify-4.x branch from 6419f55 to 14c36f7 Compare March 19, 2026 04:43
@annehaley
Copy link
Copy Markdown
Collaborator

annehaley commented Mar 19, 2026

The first thing I notice is the removal of the default text transform on VBtn. Our buttons are no longer all-caps. I suppose it isn't a bad thing, but we'll just have to be more careful about our capitalization. The second thing I notice is that our material symbols icons are not working now. It looks like they added a new API to access those icons. There are also some unnecessary scollbars in some places.

In terms of the code changes, I'm concerned about the replacement of classes like pa-0. We use classes like that all over the place, do we need to change them all? I don't see anything obvious in the release notes to explain this change.

I think it would be wise to ask @faiza-a for her opinion as well, since this upgrade introduces a lot of tiny spacing and sizing changes.

@brianhelba
Copy link
Copy Markdown
Collaborator

brianhelba commented Mar 19, 2026 •
edited
Loading

The first thing I notice is the removal of the default text transform on VBtn. Our buttons are no longer all-caps. I suppose it isn't a bad thing, but we'll just have to be more careful about our capitalization.

I could restore this, just let me know what you prefer. Personally, I think it's nicer to not be shouted at by my buttons.

The second thing I notice is that our material symbols icons are not working now. It looks like they added a new API to access those icons. There are also some unnecessary scollbars in some places.

I'll investigate.

In terms of the code changes, I'm concerned about the replacement of classes like pa-0. We use classes like that all over the place, do we need to change them all? I don't see anything obvious in the release notes to explain this change.

Vuetify 4 now uses cascade layers for all of its declarations (like pa-0), as mentioned in the release notes.

However, the codebase here uses a mixture of utility classes, custom CSS, custom CSS with !important (I'm listing this separately because it has a different priority and because it's used liberally, which isn't ideal), and inline style= attributes.

See my commit message:

Vuetify 3 utility classes used !important and won over component styles. Vuetify 4 replaced !important with CSS layers, so unlayered component styles now override them. Consolidate the utility class values into the component CSS rules and remove the now-ineffective utility classes from templates.

So, we only have effective style differences in cases where there was previous a conflict between different types of styling. My commit was an attempt to only address conflicts, by moving conflicting things out of utility classes (which tended to be more piecemeal) and into the custom CSS (which seemed to be more authoritative).

I think it would be wise to ask @faiza-a for her opinion as well, since this upgrade introduces a lot of tiny spacing and sizing changes.

Sure. In general, I find that if you want well-behaved (across screen sizes) and consistent-styled CSS, then less is more. Generally, having a few broadly scoped rules tends be more maintainable and effective than trying to control individual pixels everywhere. If it's possible to fix any new issues by removing or generalizing CSS, I think that's ideal.

@brianhelba
Copy link
Copy Markdown
Collaborator

brianhelba commented Mar 19, 2026

The second thing I notice is that our material symbols icons are not working now. It looks like they added a new API to access those icons. There are also some unnecessary scollbars in some places.

Can you give specific examples of where you see icon and scrollbar differences?

@annehaley
Copy link
Copy Markdown
Collaborator

annehaley commented Mar 19, 2026

The scrollbar I noticed is on the lefthand sidebar once a project is selected. I actually think this is just because the vertical padding on the project-row class is too much. We can reduce that to 10px instead of 20px.

As for the icons, they didn't load the first time but now I see them consistently. It may have just failed to fetch them on that first load? So disregard my comment about the material symbols icons.

@brianhelba brianhelba force-pushed the renovate/vuetify-4.x branch from 14c36f7 to 5afb8a8 Compare March 20, 2026 16:32
@brianhelba
Copy link
Copy Markdown
Collaborator

brianhelba commented Mar 20, 2026 •
edited
Loading

The TypeScript improvements combined with the new Vuetify version have surfaced some type errors here. I'd appreciate any guidance for fixing them.

@brianhelba brianhelba force-pushed the renovate/vuetify-4.x branch from 5afb8a8 to 94c36b2 Compare March 20, 2026 16:45
@brianhelba
Copy link
Copy Markdown
Collaborator

brianhelba commented Mar 20, 2026

The scrollbar I noticed is on the lefthand sidebar once a project is selected. I actually think this is just because the vertical padding on the project-row class is too much. We can reduce that to 10px instead of 20px.

I'm not seeing this on my screen size (or my attempts to resize). Could you provide a screenshot? The Cloudflare branch preview is nice for this.

Alternatively, if you'd like to push any changes that make this work on your screen size, go ahead.

@faiza-a
Copy link
Copy Markdown

faiza-a commented Mar 23, 2026 •
edited
Loading

I think it would be wise to ask @faiza-a for her opinion as well, since this upgrade introduces a lot of tiny spacing and sizing changes.

I have added some suggestions in this Figma file. (ill add a few more in it this week). You can pick and choose whichever pointers make sense to you all.

@brianhelba brianhelba force-pushed the renovate/vuetify-4.x branch 4 times, most recently from c41dd74 to a2f4a54 Compare March 29, 2026 16:28
@brianhelba
Copy link
Copy Markdown
Collaborator

brianhelba commented Mar 29, 2026

@faiza-a @annehaley I've fixed a number of issues in response to feedback (thanks!). Let me know if you see anything else that ought to be fixed.

I intentionally didn't change any string capitalization. I realize that buttons are no longer all-uppercase, but hopefully it'll be easy to make a separate PR addressing string capitalization style more broadly.

@brianhelba brianhelba force-pushed the renovate/vuetify-4.x branch from a2f4a54 to 4e5bc2f Compare March 29, 2026 16:40
@faiza-a
Copy link
Copy Markdown

faiza-a commented Mar 31, 2026

@faiza-a @annehaley I've fixed a number of issues in response to feedback (thanks!). Let me know if you see anything else that ought to be fixed.

I intentionally didn't change any string capitalization. I realize that buttons are no longer all-uppercase, but hopefully it'll be easy to make a separate PR addressing string capitalization style more broadly.

@brianhelba The changes look great. Thanks for working on those. I have added 3 minor pointers in the same Figma file related to alignment and button style.
Regarding the capitalization of button labels, it is okay to keep it camel case as long as it is consistent throughout the application. In fact you can even make it sentence case for better readability instead of all-caps.

@renovate renovate Bot force-pushed the renovate/vuetify-4.x branch from 4e5bc2f to d9d0793 Compare May 13, 2026 15:20
@renovate renovate Bot changed the title fix(deps): update dependency vuetify to v4 Update dependency vuetify to v4 May 13, 2026
@annehaley annehaley merged commit aa70507 into master May 13, 2026
4 checks passed
@annehaley annehaley deleted the renovate/vuetify-4.x branch May 13, 2026 15:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@annehaley annehaley annehaley approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brianhelba @annehaley @faiza-a